<template>
  <div>
    <h2>ToDo列表</h2>
    <input type="text" v-model="values" />
    <input type="text" v-model="values2" />
    <button @click="addrewu">增加任务</button>
    <ul>
      <li v-for="item in rewus" :key="item.id">
        任务：{{ item.rewu }}--时间：{{ item.time }}
        <div>
          <a href="javascript:;" @click="deldate(item.id)">删除</a>

          <select name="" id="" v-model="item.status" @change="updateinfo">
            <option value="已完成">已完成</option>
            <option value="未完成">未完成</option>
          </select>
        </div>
      </li>
    </ul>
    <div>
      <span>已完成：{{ yiwc }}</span>
      <span>未完成：{{ wewc }}</span>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'

const rewus = ref([
  { id: 1, rewu: '锻炼', time: 2, status: '未完成' },
  { id: 2, rewu: '练字', time: 1, status: '未完成' },
  { id: 3, rewu: '跳绳', time: 30, status: '未完成' },
  { id: 4, rewu: '跑步', time: 3, status: '未完成' }
])

const values2 = ref()
const values = ref()

const addrewu = () => {
  if (values.value === '') {
    return alert('请输入任务')
  }
  if (values2.value === '') {
    return alert('请输入时间')
  }
  rewus.value.push({
    rewu: values.value,
    id: 0,
    time: values2.value,
    status: '未完成'
  })
  values.value = ''
  values2.value = ''
}
const deldate = (id: number) => {
  rewus.value = rewus.value.filter((item) => item.id !== id)
}

const yiwc = computed(() => rewus.value.filter((item) => item.status === '已完成').length)
const wewc = computed(() => rewus.value.filter((item) => item.status === '未完成').length)

const updateinfo = () => {}
</script>

<style lang="scss" scoped>
li {
  width: 280px;
  display: flex;
  justify-content: space-between;
}
select {
  margin-left: 10px;
}
</style>
